<template>
  <div class="app-container">
    <el-tabs v-model="activeName" class="user_tabs" @tab-click="handleClick">
      <el-tab-pane :label="t('user.profileInfo')" name="user">
        <div>
          <img
            style="width: 50px"
            src="../../../assets/images/profile.jpg"
            alt="profile"
          />
        </div>
        {{ t("user.username") }}: {{ userInfo.userName }}
      </el-tab-pane>
      <el-tab-pane :label="t('user.editPwd')" name="pwd">
        <el-form
          :model="formInfo"
          ref="formInfoRef"
          :rules="rules"
          :label-width="appStore.language == 'zh' ? 90 : 120"
        >
          <el-form-item prop="oldPwd" :label="t('user.oldPassword')">
            <el-input
              v-model="formInfo.oldPwd"
              :placeholder="t('user.oldPasswordPlaceholder')"
              type="password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item prop="newPwd" :label="t('user.newPassword')">
            <el-input
              v-model="formInfo.newPwd"
              :placeholder="t('user.newPasswordPlaceholder')"
              type="password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item prop="checkPwd" :label="t('user.confirmPassword')">
            <el-input
              v-model="formInfo.checkPwd"
              :placeholder="t('user.confirmPasswordPlaceholder')"
              type="password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">{{
              t("common.confirm")
            }}</el-button>
            <el-button @click="cancle">{{ t("common.cancel") }}</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import useAppStore from "@/store/modules/app";
const appStore = useAppStore();
import useUserStore from "@/store/modules/user";
import { UpdateUserPwd } from "@/api/sys/user";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const userStore = useUserStore();
const userInfo = computed(() => JSON.parse(useUserStore().userInfo));
console.log(userInfo);
const activeName = ref("user");
const formInfo = reactive({
  oldPwd: "",
  newPwd: "",
  checkPwd: "",
});
const VerifyNewPassword = (rule, value, cb) => {
  if (value == "") {
    cb(new Error(t("user.newPassword")));
  } else if (value == formInfo.oldPwd) {
    cb(new Error(t("user.newPasswordSameAsOldTip")));
  } else {
    cb();
  }
};
const VerifyCheckPassword = (rule, value, cb) => {
  if (value == "") {
    cb(new Error(t("user.confirmPasswordRuleErrorTip")));
  } else if (value !== formInfo.newPwd) {
    cb(new Error(t("user.confirmPasswordMismatchTip")));
  } else {
    cb();
  }
};
const rules = reactive({
  oldPwd: [
    {
      required: true,
      message: t("user.oldPasswordRuleErrorTip"),
      trigger: "blur",
    },
  ],
  newPwd: [
    {
      required: true,
      message: t("user.newPasswordRuleErrorTip"),
      trigger: "blur",
    },
    { validator: VerifyNewPassword, trigger: "blur" },
  ],
  checkPwd: [
    {
      required: true,
      message: t("user.confirmPasswordRuleErrorTip"),
      trigger: "blur",
    },
    { validator: VerifyCheckPassword, trigger: "blur" },
  ],
});

const handleClick = (tab) => {
  activeName.value = tab.paneName;
};

const submit = () => {
  proxy.$refs["formInfoRef"].validate((valid) => {
    if (!valid) return;

    const params = {
      loginAccount: userInfo.value.loginAccount,
      oldPwd: formInfo.oldPwd,
      newPwd: formInfo.newPwd,
    };

    UpdateUserPwd(params)
      .then((res) => {
        ElMessage({
          message: t("user.passwordChangeSuccessTip"),
          type: "success",
        });
        cancle();
        setTimeout(() => {
          userStore.logOut().then(() => {
            location.href = "/index";
          });
        }, 2000);
      })
      .catch((err) => {
        cancle();
      });
  });
};

const cancle = () => {
  proxy.$refs["formInfoRef"].resetFields();
};

console.log(userInfo, "dddd");
</script>

<style lang="scss" scoped>
.app-container {
  background: #fff;
  .user_tabs {
    margin: 20px;
  }
}
</style>
